<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        .box{
             width: 520px; 
             height: 280px;
             margin: 100px auto; 
             position: relative;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .imgs>li{
            position: absolute;
            width: 20px;
            height: 280px;
            display: none;
        }
        .imgs>li.first{
            display: block;
        }
        .click span{
            position: absolute;
            color: white;
            font-size: 35px;
            display: inline-block;
            width: 30px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.3);
            top: calc(50% - 25px);
            display: none;
        }
        .click .prev{
           left: 0;
        }
        .click .next{
           right: 0;
        }
        .circle{
            position: absolute;
            width: 100%;
            display: flex;
            justify-content: center;
            bottom:10px;
        }
        .circle>li{
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            margin: 0 5px; 
        }
        .circle .one{
            background-color: red;
        }
        .click span:hover{
            background-color: rgba(0,0,0,0.7)
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="imgs">
            <li class="first"><a href="#"><img src="img/01.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/02.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/03.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/04.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/05.jpg" alt=""></a></li>
        </ul>
        <div class="click">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
        <ul class="circle">
            <li class="one"><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
    <script src="jquery.js"></script>
</body>
</html>
<script>
    index = 0;
    var imgLis = $('.imgs').find('li');
    var circles = $('.circle').find('li');

    function changeImg(){        
        imgLis.eq(index).addClass('first').siblings().removeClass('first');
        circles.eq(index).addClass('one').siblings().removeClass('one');
    }

    // 下一张
    function prevImg(){
        index = index == 0 ? imgLis.length - 1 : index -1;
        changeImg();
    }
    // 上一张
    function nextImg(){
        index = index == imgLis.length - 1 ? 0 : index + 1;
        changeImg();
    }

    var timer = setInterval(nextImg,1000)

    // 指示灯跟着鼠标移动
    
        circles.hover(function(){
            clearInterval(timer);
            timer = null;
            index = $(this).index();
            changeImg(index)
        })
 

    $('.box').hover(function(){
        clearInterval(timer);
        timer = null;
        $('.prev').stop().fadeIn(1000);
        $('.next').stop().fadeIn(1000);
    },function(){
        if(timer == null){
            timer = setInterval(nextImg,1000)
        }
        $('.prev').stop().fadeOut(1000);
        $('.next').stop().fadeOut(1000);
    });
  
    $(".prev").click(function(){       
        prevImg();
    })
    $(".next").click(function(){       
        nextImg();
    })
    
  
    
</script>